<template>
  <div>

    <el-container>

      <div class="content">
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <h1>欢迎来到世界之窗</h1>
            </div>
            <p>这里是世界之窗，一个面向世界的服务平台</p>
          </el-col>
        </el-row>


        <div class="recent-play play-section">
          <h2 class="title">近期展会</h2>
          <el-carousel :interval="2000" type="card" height="300px">
            <el-carousel-item v-for="pro in get_products()" :key="pro.id">
                <img :src="pro.coverPic" class="carousel-image" alt="轮播图图片">
            </el-carousel-item>
          </el-carousel>
        </div>

        <div class="new-books-delivery">
          <h2 class="title">为你推荐</h2>
          <el-row :gutter="10">
            <el-col :span="6" v-for="pro in get_products()" :key="pro.id" class="fixed-width-col"
              style="margin-bottom: 5px;">
              <el-card class="newbook-card" :body-style="{ height: '300px', margin: '10px' }">
                <div class="card-box">
                  <img :src="pro.coverPic" class="book-cover" alt="Book Cover">
                </div>
                <div class="bot-content">
                  <p class="book-author">价格：{{ pro.price.format }}</p>
                  <p class="book-publish-date">销量：{{ pro.cumulativeSaleCount.origin }}</p>
                  <p class="book-summary">{{ pro.comment }}</p>
                </div>
                <div class="bot-foot"></div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>


      <el-aside>
        <div class="right-content">
          <div class="top-rank">
            <h2 class="title">最新发布</h2>
            <el-row>
              <el-col :span="24" v-for="(pro, index) in get_new_products()" :key="pro.id" class="book-col">
                <div class="book-info">
                  <h3 class="book-title">{{ index + 1 }}.{{ pro.shopName }}</h3>
                  <p class="book-author">{{ pro.name }}</p>
                </div>
              </el-col>
            </el-row>
          </div>

          <div class="message-board">
            <h2 class="title">留言板</h2>
            <!-- 留言列表 -->
            <div class="message-list">
              <div class="message-item" v-for="(msg, index) in messages" :key="index">
                <div class="message-content">
                  <h3>{{ msg.title }}</h3>
                  <p>{{ msg.content }}</p>
                </div>
              </div>
            </div>

            <!-- 新留言输入 -->
            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="newMessage.content">
            </el-input>
            <el-button type="primary" @click="submitMessage">提交留言</el-button>
          </div>

        </div>

      </el-aside>
    </el-container>

  </div>
</template>

<script>

import BookDetail from "@/views/Books/BookDetail.vue";
import { books } from '@/assets/data/booksData'; // 导入所有书籍数据
import TagBookList from "@/views/Tag/TagBookList.vue";
import { Menu, MenuItem } from "element-ui";
import '@/assets/css/home.css'
import { products } from "@/assets/data/product";


export default {
  name: 'HomeView',
  components: {
    'el-menu': Menu,
    'el-menu-item': MenuItem,
    BookDetail,
    TagBookList
  },

  data() {
    return {
      value: 3.7,
      messages: [], // 用于存储留言的数组
      books: books,
      products: products,
      newMessage: {
        title: '匿名用户', // 可以在这里设置默认的用户名
        content: '', // 留言内容
      },
    };
  },
  created() {
    this.loadMessages(); // 组件创建时加载留言
    console.log('All books:', this.books);
    const bookId = this.$route.params.id;
    // const book = this.books.find(book => book.id === parseInt(bookId));
  },
  methods: {
    hotBooks() {
      return this.books.filter(book => book.bookType === 'hot');
    },
    newBooks() {
      // return this.books;
      return this.books.filter(book => book.bookType === 'new');
    },
    get_products() {
      // return this.books;
      return this.products;
    },
    get_new_products() {
      return this.products;
    },
    goToTagDetail() {
      this.$router.push({ path: `/tag` });
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    submitMessage() {
      if (this.newMessage.content.trim() === '') {
        this.$message('留言内容不能为空');
        return;
      }
      this.messages.push({
        title: this.newMessage.title,
        content: this.newMessage.content
      });
      this.saveMessages(); // 提交留言后保存留言
      this.newMessage.content = '';
      this.$message.success('留言成功');
    },
    loadMessages() {
      const savedMessages = localStorage.getItem('messages');
      if (savedMessages) {
        this.messages = JSON.parse(savedMessages);
      }
    },
    saveMessages() {
      localStorage.setItem('messages', JSON.stringify(this.messages));
    }
  },
};
</script>
<style scoped>
.card-box {
  height: 160px;
}
</style>
